.main {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: round;
    /* animation-duration: 500ms; */
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes round {
    0% {
        top: 0%;
        left: 0%;
        background: red;
    }

    25% {
        top: 0%;
        left: calc(100% - 100px);
        background: blue;
    }

    50% {
        top: calc(100% - 100px);
        left: calc(100% - 100px);
        background: yellow;
    }

    75% {
        top: calc(100% - 100px);
        left: 0%;
        background: green;
    }

    100% {
        top: 0%;
        left: 0%;
        background: red;
    }
}


.load {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
}

.load span {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fbc2eb;
    position: absolute;
    /* -webkit-animation: load 1.04s ease infinite; */
    animation: load 10.04s ease infinite;
}

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

.load span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.13s;
}

.load span:nth-child(2) {
    left: 15px;
    top: 15px;
    -webkit-animation-delay: 0.26s;
}

.load span:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay: 0.39s;
}

.load span:nth-child(4) {
    top: 15px;
    right: 15px;
    -webkit-animation-delay: 0.52s;
}

.load span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.65s;
}

.load span:nth-child(6) {
    right: 15px;
    bottom: 15px;
    -webkit-animation-delay: 0.78s;
}

.load span:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay: 0.91s;
}

.load span:nth-child(8) {
    bottom: 15px;
    left: 15px;
    -webkit-animation-delay: 1.04s;
}



@keyframes tips {
    25% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0);
    }
}

.jump {
    width: 50px;
    height: 50px;
    background: #fbc2eb;
    -webkit-animation: tips 1s linear infinite;
    animation: tips 1s linear infinite;
}

/* 位置，高宽，内外边距，边框，背景色，前景色，  */
/* 字体相关 */

.loading {
    margin: 0;
    padding: 0;
    width: 300px;
    height: 100px;
    background: #262626;

    /* animation: loading 2s ease infinite; */
}

ul.loading {
    list-style: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;

}

ul.loading li {
    list-style: none;
    width: 40px;
    height: 40px;

    background: #fff;
    border-radius: 50%;

    animation: loading 1.6s ease-in-out infinite;
}

@keyframes loading {

    0%,
    40%,
    100% {
        transform: scale(0.2);
    }

    20% {
        transform: scale(1);
    }
}

ul li:nth-child(1) {
    animation-delay: -1.6s;
    background: #ffff00;
    box-shadow: 0 0 50px #ffff00;
}

ul li:nth-child(2) {
    animation-delay: -1.4s;
    background: #e67e22;
    box-shadow: 0 0 50px #e67e22;
}

ul li:nth-child(3) {
    animation-delay: -1.2s;
    background: #e74c3c;
    box-shadow: 0 0 50px #e74c3c;
}

ul li:nth-child(4) {
    animation-delay: -1s;
    background: #ff3f34;
    box-shadow: 0 0 50px #ff3f34;
}

ul li:nth-child(5) {
    animation-delay: -0.8s;
    background: #16a085;
    box-shadow: 0 0 50px #16a085;
}

ul li:nth-child(6) {
    animation-delay: -0.6s;
    background: #27ae60;
    box-shadow: 0 0 50px #27ae60;
}

ul li:nth-child(7) {
    animation-delay: -0.4s;
    background: #2980b9;
    box-shadow: 0 0 50px #2980b9;
}

ul li:nth-child(8) {
    animation-delay: -0.2s;
    background: #8e44ad;
    box-shadow: 0 0 50px #8e44ad;
}

.load2 {

    margin: 0;
    padding: 0;
    width: 60px;
    height: 60px;
    background: #262626;

    position: absolute;
    top: 66%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c {
    width: 20px;
    height: 20px;
    float: left;

    position: relative;
}

.c::before {
    content: "";
    position: absolute;

    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #3498db;
    animation: c 1s infinite;
}

.c2::before {
    animation-delay: 0.1s;
}

.c3::before {
    animation-delay: 0.2s;
}

.c4::before {
    animation-delay: 0.3s;
}

.c5::before {
    animation-delay: 0.4s;
}

@keyframes c {
    100% {
        width: 0;
        height: 0;
    }
}